<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>支付页-成功</title>
		<link rel="icon" href="./img/favicon.ico">


		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<link rel="stylesheet" type="text/css" href="./css/icon.css" />
		<style>
			a {
    color: #666;
}

.top {
    background-color: #f1f1f1;
}

.logoArea {
    overflow: hidden;
    position: relative;
}

.logo {
    background: url(../img/icons.png) no-repeat;
    background-position: -370px 0;
    width: 177px;
    height: 75px;
}

.logo .title {
    font: 19px "微软雅黑";
    position: absolute;
    top: 24px;
    left: 190px;
}

.payfail {
    padding: 25px;
    margin: 20px 0;
    overflow: hidden;
    border: 1px solid #eee;
    font-family: "微软雅黑";
}

.payfail .btn-danger {
    border: 1px solid #ea4a36;
}

.payfail .fail {
    width: 500px;
    margin: 0 auto;
}

.fail h3 {
    font-weight: normal;
}
.fail h3 i {
    font-size:40px;
	color:#ea4a36;
	float:left;
	margin-right:10px;
}
.success h3 i{
	color:#2ab018;
}
.fail .fail-text {
    float: left;
    margin-left: 52px;
    line-height: 26px;
    font-size: 15px;
}

.fail .fail-text a {
    color: #333;
}

.fail-text .button {
    margin: 16px 0;
}
.fail .btn-xlarge{
	color:#fff !important;
	padding:10px 30px;
	font-size: 16px;
}
	</style>
	</head>

	<body>
		<!--页面顶部-->
		<div id="nav-bottom">
			<!--顶部-->
			<div class="nav-top">
				<div class="top">
					<div class="py-container">
						<div class="shortcut">
							<ul class="fl">
								<li class="f-item">shop欢迎您！</li>
								<li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a href="register.html" target="_blank">免费注册</a></span></li>
							</ul>
							<div class="fr typelist">
								<ul class="types">
									<li class="f-item"><span>我的订单</span></li>

									<li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
									<li class="f-item"><span><a href="home.html" target="_blank">我的shop</a></span></li>
									<li class="f-item"><span>shop会员</span></li>
									<li class="f-item"><span>企业采购</span></li>
									<li class="f-item"><span>关注shop</span></li>
									<li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
									<li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>
									<li class="f-item"><span>网站导航</li>
								</ul>
							</div>

						</div>
					</div>
				</div>

				<!--头部-->
				<div class="header">
					<div class="py-container">
						<div class="yui3-g Logo">
							<div class="yui3-u Left logoArea">
								<a class="logo-bd" title="shop" href="index.html" target="_blank"></a>
							</div>
							<div class="yui3-u Rit searchArea">
								<div class="search">
									<form action="" class="sui-form form-inline">
										<!--searchAutoComplete-->
										<div class="input-append">
											<input type="text" id="autocomplete" class="input-error input-xxlarge" />
											<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
										</div>
									</form>
								</div>
							</div>

						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="cart py-container" id="app">
			<!--主内容-->
			<div class="payfail">
				<div class="fail success">
					<h3>
						<i class="iconfont icon-queding"></i>
						恭喜您，订单提交成功！</h3>
					<div class="fail-text">
						<p>支付方式：货到付款</p>
						<p>支付金额：￥{{money}}元</p>
						<p class="button">
							<a href="orderlist.html" class="sui-btn btn-primary btn-xlarge">查看订单</a>
							<a href="index.html" class="sui-btn btn-xlarge btn-goshop">继续购物</a>
						</p>
					</div>
				</div>

			</div>
		</div>

		<!-- 底部栏位 -->
		<!--页面底部-->
		<div class="clearfix footer">
			<div class="py-container">
				<div class="footlink">
					<div class="Mod-service">
						<ul class="Mod-Service-list">
							<li class="grid-service-item intro  intro1">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item  intro intro2">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item intro  intro3">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item  intro intro4">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item intro intro5">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
						</ul>
					</div>
					<div class="clearfix Mod-list">
						<div class="yui3-g">
							<div class="yui3-u-1-6">
								<h4>购物指南</h4>
								<ul class="unstyled">
									<li>购物流程</li>
									<li>会员介绍</li>
									<li>生活旅行/团购</li>
									<li>常见问题</li>
									<li>购物指南</li>
								</ul>

							</div>
							<div class="yui3-u-1-6">
								<h4>配送方式</h4>
								<ul class="unstyled">
									<li>上门自提</li>
									<li>211限时达</li>
									<li>配送服务查询</li>
									<li>配送费收取标准</li>
									<li>海外配送</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>支付方式</h4>
								<ul class="unstyled">
									<li>货到付款</li>
									<li>在线支付</li>
									<li>分期付款</li>
									<li>邮局汇款</li>
									<li>公司转账</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>售后服务</h4>
								<ul class="unstyled">
									<li>售后政策</li>
									<li>价格保护</li>
									<li>退款说明</li>
									<li>返修/退换货</li>
									<li>取消订单</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>特色服务</h4>
								<ul class="unstyled">
									<li>夺宝岛</li>
									<li>DIY装机</li>
									<li>延保服务</li>
									<li>购物卡</li>
									<li>会员充值卡</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>帮助中心</h4>
								<ul class="unstyled">
									<li>夺宝岛</li>
									<li>DIY装机</li>
									<li>延保服务</li>
									<li>购物卡</li>
									<li>会员充值卡</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="Mod-copyright">
						<ul class="helpLink">
							<li>关于我们<span class="space"></span></li>
							<li>联系我们<span class="space"></span></li>
							<li>关于我们<span class="space"></span></li>
							<li>商家入驻<span class="space"></span></li>
							<li>营销中心<span class="space"></span></li>
							<li>友情链接<span class="space"></span></li>
							<li>关于我们<span class="space"></span></li>
							<li>营销中心<span class="space"></span></li>
							<li>友情链接<span class="space"></span></li>
							<li>关于我们</li>
						</ul>
						<p>Copyright©2017-2021 All Rights Reserved.</p>
					</div>
				</div>
			</div>
		</div>
		<!--页面底部END-->
		<script src="js/vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data() {
					return {
						money: 0.0
					}
				},
				created() {
					this.money=this.queryParm('money');
				},
				methods: {
					queryParm(variable)
					{
						   var query = window.location.search.substring(1);
						   var vars = query.split("&");
						   for (var i=0;i<vars.length;i++) {
								   var pair = vars[i].split("=");
								   if(pair[0] == variable){return pair[1];}
						   }
						   return(false);
					}
				},
			})
		</script>
	</body>
</html>
